<template>
	<div>
		<el-dialog title="配伍浓度自定义" :visible.sync="dialogVisibleXiangHu" width="60%" :before-close="handleClose">
			<el-card>
				<el-row style="margin-bottom:10px;">
					<el-col :span="12" class="box">
						<div class="label">溶质药品名称</div>
						<div class="value">{{nowData.drugName}}</div>
					</el-col>
					<el-col :span="12" class="box">
						<div class="label">溶质药品编码</div>
						<div class="value">{{nowData.drugCode}}</div>
					</el-col>
					<el-col :span="24" class="box" style="border:0;">
						<div class="label">溶质给药单位</div>
						<div class="value">
							{{rzgydaw}}
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-form label-width="110px">
						<el-col :span="12" style="height:62px;">
							<el-form-item label="给药途径">
								<el-input v-model="gytjVal"  :readonly="true"  size="mini" style="width:125px;"></el-input>
								<input type="hidden" v-model="gytjValID">
								<el-button type="primary" size="mini" @click="openSelect('给药途径',gytjValID)">选择</el-button>
								<el-button type="primary" size="mini" @click="clearFun('给药途径')">清除</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12" style="height:62px;">
							<el-form-item label="溶媒药品">
								<el-input v-model="rmypVal"  :readonly="true"  size="mini" style="width:125px;"></el-input>
								<input type="hidden" v-model="rmypValID">
								<el-button type="primary" size="mini" @click="openSelect('溶媒药品',rmypValID)">选择</el-button>
								<el-button type="primary" size="mini" @click="clearFun('溶媒药品')">清除</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="推荐浓度">
								<div class="dialogFirstRow">
									<el-input v-model="recommendEachLow" size="mini"></el-input>
									<span> - </span>
									<el-input v-model="recommendEachHigh" size="mini"></el-input>
									<span>%</span>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="限制浓度">
								<div class="dialogFirstRow">
									<el-input v-model="warnEachLow" size="mini"></el-input>
									<span> - </span>
									<el-input v-model="warnEachHigh" size="mini"></el-input>
									<span>%</span>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="推荐溶煤量(ml)">
								<div class="dialogFirstRow">
									<el-input v-model="recommendRmLow" size="mini"></el-input>
									<span> - </span>
									<el-input v-model="recommendRmHigh" size="mini"></el-input>
									<span>%</span>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="限制溶煤量(ml)">
								<div class="dialogFirstRow">
									<el-input v-model="warnRmLow" size="mini"></el-input>
									<span> - </span>
									<el-input v-model="warnRmHigh" size="mini"></el-input>
									<span>%</span>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="警示信息">
								<el-input type="textarea" v-model="remark"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="设置说明">
								<div class="tip">推荐浓度、推荐溶媒量为不推荐级别；限制浓度、限制溶媒量为拦截级别。如选择溶媒时药品很少，请先在药品配对进行溶媒设置设置溶媒转化为ml单位。浓度的设置以溶质给药单位/100ml作为标准百分比。</div>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				
				<div class="clear">
					<el-button type="success" class="fr" @click="onSubmit">保存</el-button>
				</div>
			</el-card>
			<el-card style="margin-top:10px">
				<Graytable :tHead="tHead" :tData="tData"  @operateClick="operateClick"></Graytable>
				<pagination
					:total="query.total"
					:page.sync="query.page"
					:limit.sync="query.limit"
					@pagination="getList"/>
			</el-card>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleXiangHu = false">关 闭</el-button>
			</span>
		</el-dialog>
		<SelectDialog ref="selectDialog" ctype="配伍浓度" cintype="给药途径" :dataObj="nowData" :checkId="checkId" @selectFun="selectFun"></SelectDialog>
		<SelectDialog ref="selectDialogRM" ctype="配伍浓度" cintype="溶媒药品" :dataObj="nowData" :checkId="checkId" @selectFun="selectFun"></SelectDialog>
	</div>
</template>

<script>
	import SelectDialog from "./selectDialog";
	export default {
		components: {
			SelectDialog
		},
		props:{
			dataObj:{
				required:true
			}
		},
		data () {
			return {
				query: {
				  total: 0,
				  page: 1,
				  limit: 10
				},
				recommendEachLow:"",//推荐低浓度
				recommendEachHigh:"",//推荐高浓度
				warnEachLow:"",//限制低浓度
				warnEachHigh:"",//限制高浓度
				recommendRmLow:"",//推荐溶煤量低值
				recommendRmHigh:"",//推荐溶煤量高值
				warnRmLow:"",//限制荣煤量低值
				warnRmHigh:"",//限制溶煤量高值
				dialogVisibleXiangHu:false,
				tHead:[
					{
						label:"操作",
						operate:["删除"],
						align:"center",
						width:"50px"
					},
					{
						prop:"drugNameRm",
						label:"溶媒药品"
					},
					{
						prop:"routeName",
						label:"给药途径"
					},
					{
						prop:"tjbfb",
						label:"推荐百分比"
					},
					{
						prop:"tjrml",
						label:"推荐溶煤量"
					},
					{
						prop:"xzbfb",
						label:"限制百分比"
					},
					{
						prop:"xzrml",
						label:"限制溶煤量"
					},
					{
						prop:"remark",
						label:"警示信息"
					},
					{
						prop:"operUser",
						label:"操作人员"
					},
				],
				tData:[],
				checkId:"",
				checkName:"",
				remark:"",
				nowData:{},
				gytjVal:"",
				gytjValID:"",
				rmypVal:"",
				rmypValID:"",
				cintype:"",
				rzgydaw:"",
				info:{}
			}
		},
		watch:{
			dataObj(val){
				this.nowData=val;
				this.resetTData(true);
			}
		},
		methods:{
			async getInfo () {
				let res = await this.$custom.listCompatibilitySelectedEdit({
					drugUniqueCode:this.nowData.drugUniqueCode
				})
				if(res.unitList&&res.unitList.length>0){
					this.rzgydaw="[给药单位："+res.unitList[0].dose_unit+"] [剂型："+res.unitList[0].ypjx+"] [规格："+res.unitList[0].ypgg+"] [厂家："+res.unitList[0].ypcj+"]";
					this.info=res.unitList[0];
				}
			},
			selectFun(id,name){
				if(this.cintype == "给药途径"){
					this.gytjVal = name;
					this.gytjValID = id;
				}else if(this.cintype == "溶媒药品"){
					this.rmypVal = name;
					this.rmypValID = id;
				}
				/* this.checkName=name;
				this.checkId=id; */
			},
			clearFun(type){
				if(type == "给药途径"){
					this.gytjVal = "";
					this.gytjValID = "";
				}else if(type == "溶媒药品"){
					this.rmypVal = "";
					this.rmypValID = "";
				}
				this.checkName="";
				this.checkId="";
			},
			openSelect (type,checkId) {
				this.cintype = type;
				this.checkId = checkId;
				if(type == "给药途径"){
					this.$refs.selectDialog.show()
				}else{
					this.$refs.selectDialogRM.show()
				}
				
			},
			async getList () {
				let res=await this.$custom.listCompatibilitySelected({
					drugUniqueCode:this.nowData.drugUniqueCode,
					page:this.query.page,
					pageSize:this.query.limit
				})
				for(var i in res.rows){
					res.rows[i].tjbfb = res.rows[i].recommendEachLow + "%至" + res.rows[i].recommendEachHigh + "%";
					res.rows[i].tjrml = res.rows[i].recommendRmLow + "ml至" + res.rows[i].recommendRmHigh + "ml";
					res.rows[i].xzbfb = res.rows[i].warnEachLow + "%至" + res.rows[i].warnEachHigh + "%";
					res.rows[i].xzrml = res.rows[i].warnRmLow + "ml至" + res.rows[i].warnRmHigh + "ml";
				}
				this.tData=res.rows;
				this.query.total=res.total;
			},
			show(){
				this.dialogVisibleXiangHu = true;
			},
			async onSubmit () {
				if(!this.gytjValID){
					this.$message({
					  message: "请选择给药途径",
					  type:'error',
					  duration:1000
					});
					return;
				}
				if(!this.rmypVal){
					this.$message({
					  message: "请选择溶媒药品",
					  type:'error',
					  duration:1000
					});
					return;
				}
				let res=await this.$custom.listCompatibilitySave({
					drugUniqueCodeRz:this.nowData.drugUniqueCode,
					drugNameRz:this.nowData.drugName,
					rzDoseUnit:this.info.dose_unit,
					drugUniqueCodeRm:this.gytjValID,
					drugNameRm:this.gytjVal,
					routeCode:this.gytjValID,
					routeCodes:this.gytjValID,
					rmCodes:this.rmypValID,
					recommendEachLow:this.recommendEachLow,
					recommendEachHigh:this.recommendEachHigh,
					warnEachLow:this.warnEachLow,
					warnEachHigh:this.warnEachHigh,
					recommendRmLow:this.recommendRmLow,
					recommendRmHigh:this.recommendRmHigh,
					warnRmLow:this.warnRmLow,
					warnRmHigh:this.warnRmHigh,
					remark:this.remark
				})
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				if(res.code == 1){
					this.resetTData();
				}
			},
			resetTData(flag){
				this.recommendEachLow="";
				this.recommendEachHigh="";
				this.warnEachLow="";
				this.warnEachHigh="";
				this.recommendRmLow="";
				this.recommendRmHigh="";
				this.warnRmLow="";
				this.warnRmHigh="";
				this.checkId="";
				this.checkName="";
				this.remark="";
				this.gytjVal="";
				this.gytjValID="";
				this.rmypVal="";
				this.rmypValID="";
				this.cintype="";
				this.rzgydaw="";
				this.query={
					total:0,
					page:1,
					limit:10
				}
				this.tData=[];
				this.getInfo();
				this.getList();
				if(!flag){
					this.$emit("changeFun")
				}
			},
			handleClose () {
				this.dialogVisibleXiangHu = false;
			},
			operateClick(item,row){
				this.$confirm('确定删除通用自定义?', '提示', {
					confirmButtonText: '确定删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delFun(row);
				}).catch(() => {
				});
			},
			async delFun(row){
				let res=await this.$custom.listCompatibilityDel({
					drugUniqueCodeRz:row.drugUniqueCodeRz,
					id:row.id
				})
				this.$message({
				  message: res.msg,
				  type: res.code == 1?'success':'error',
				  duration:1500
				});
				this.resetTData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tip{
		color:red;
		line-height:20px;
	}
	.el-card {
		margin-left: 3px;
	}

	.SearchT {
		display: flex;
		justify-content: flex-end;
		height: 40px;
		align-items: center;
		background-color: #e6edf3;
		font-size: 14px;
	}

	.tableLable {
		flex: 1;
		text-align: left;
		margin-left: 15px;
		letter-spacing: 2px;
		font-size: 14px;
		color: #32a6f3;
		font-weight: bold;
	}

	/* .exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
} */
	.tableStyle {
		width: 100%;
		height: 100%;
	}

	.card-table {
		width: 100%;
		height: 75%;
	}

	.block {
		text-align: center;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.Btn {
		display: flex;
		flex: 1;
		flex-wrap: nowrap;
	}

	.dialogFirstRow>>>.el-input {
		width: 70px;
	}

	.el-form-item.s_selectbox>>>.el-form-item__content {
		width: 80%;
	}
	/* .demo-form-inline>>>.el-form-item {
		margin-bottom: 0px;
	} */
	.box{
		height:30px;
		line-height:30px;
		font-size:12px;
		border-bottom:1px solid #ccc;
		.label{
			width:100px;
			background:#28a4f4;
			padding-right:5px;
			color:#fff;
			text-align:right;
			float:left;
		}
		.value{
			padding-left:5px;
			color:#333;
			margin-left:100px;
		}
	}
</style>
